<template>
  <!--  <div>-->
  <el-container style="background-color: #061727">
    <el-col :span="9">
      <el-card class="box-card" body-style="{padding:0px}" align="left" style="height:760px;overflow-y:auto;overflow-x:hidden;margin-right: 10px">
        <el-row style="margin-bottom: 10px">
          <span :style="{color:'#06CBFF'}">传感器</span>
        </el-row>

      </el-card>
    </el-col>
    <el-col :span="15">
      <el-card class="box-card" align="left" style="margin-right: 10px;height: 260px">
        <el-row style="margin-bottom: 10px">
          <span :style="{color:'#06CBFF'}">设备状态</span>
        </el-row>
        <!--              :header-cell-style="{'text-align':'center',background:'#072D45',height:'10px'}"-->
        <el-table
          :data="devStatusData"
          :header-cell-style="headerClass"
          :row-class-name="t_tableRowClassName"
          :cell-style="{'text-align':'center',padding: '0px'}"
          style="width: 90%;margin-left: 5%"
        >
          <el-table-column
            prop="name"
            label="状态量名称"
            min-width="1"
            show-overflow-tooltip
          />
          <el-table-column
            prop="data"
            label="实时数据"
            min-width="1"
            show-overflow-tooltip
          />
          <el-table-column
            prop="state"
            label="状态"
            min-width="1"
            show-overflow-tooltip
          >
            <!--            固定用法，scope=“scope”，这样可以取到table的row值-->
            <template scope="scope">
              <span v-if="scope.row.state=='正常'" style="color: rgb(32,255,2)">正常</span>
              <span v-else-if="scope.row.state=='告警'" style="color:rgb(255,181,2)">告警</span>
              <span v-else-if="scope.row.state=='故障'" style="color: rgb(255,20,2)">故障</span>
            </template>
          </el-table-column>
        </el-table>

      </el-card>
      <div />
      <el-card class="box-card" align="left" style="margin-right: 10px;height: 260px">
        <el-row style="margin-bottom: 0px">
          <span :style="{color:'#06CBFF'}">智能告警</span>
        </el-row>

        <div class="mainClass">
          <!--          <label style="padding-left: 10px;color: RGB(6,203,255)">智能告警</label>-->
          <div style="padding: 0px 30px">
            <el-row :gutter="10">
              <el-col :span="5">
                <div class="grids">
                  <table id="table1" style="width: 100%">
                    <tr>
                      <th class="thclass">时间</th>
                    </tr>
                    <template v-for="data in form">
                      <tr style="height: 20px">
                        <td class="tdclass">{{ data.timestamp }}</td>
                      </tr>
                    </template>
                  </table>
                </div>
              </el-col>
              <el-col :span="14">
                <div class="grids2">
                  <table id="table2" style="width: 100%">
                    <tr>
                      <th class="thclass">告警信息</th>
                    </tr>
                    <template v-for="data in form">
                      <tr ref="message" style="height: 20px">
                        <td class="tdclass">{{ data.message }}</td>
                      </tr>
                    </template>
                  </table>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="grids">
                  <table id="table3" style="width: 100%">
                    <tr>
                      <th class="thclass">状态</th>
                    </tr>
                    <template v-for="data in form">
                      <tr style="height: 20px">
                        <td class="tdclass" :style="changeColor(data.state)">{{ data.state }}</td>
                      </tr>
                    </template>
                  </table>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-card>
      <el-col :span="15">
        <el-card class="box-card" align="left" style="margin-right: 10px;height: 220px">
          <el-row style="margin-bottom: 10px">
            <el-col :span="15"><span :style="{color:'#06CBFF'}">设备台账</span></el-col>

          </el-row>
          <div style="height: 200px">

            <el-table
              :data="standingBookData"
              :show-header="false"
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'left','background-color': 'rgb(5,33,56)'}"
              style="width: 90%;margin-left: 30px"
            >
              <el-table-column
                prop="name"
                label="时间"
                min-width="7"
              />
              <el-table-column
                prop="data"
                label="告警信息"
                min-width="11"
              />

            </el-table>

          </div>

        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card style="margin-right: 10px;height: 220px" align="left">
          <el-row style="margin-bottom: 10px">
            <el-col :span="15"><span :style="{color:'#06CBFF'}">综合评价</span></el-col>

          </el-row>
          <!--          <v-chart ref="pieChart" :options="pieData" class="chart section" :style="{width:'100%',height: '180px'}" />-->
          <!--          <div class="status" :style="{backgroundImage: 'url('+backgroudImg+')'+','+'url('+backgroudImg2+')'}"></div>-->
          <el-image :src="overall_merit" fit="fill" style="margin-left: 20%;width: 160px" />
        </el-card>

      </el-col>
    </el-col>
  </el-container>

<!--  </div>-->
</template>
<script src="./overview.js"></script>
<style>

/*表格斑马自定义颜色*/
.el-table .Transformer-warning-row {
  background: #072D45 !important;
}
.el-table .Transformer-transparent-row {
  background: #052138 !important;
}
</style>
<style lange="scss" scoped>

/* 表格部分样式*/
::v-deep .el-table__header tr,
::v-deep .el-table__header th {
  padding: 0;
  height: 10px;
  font-size: 14px;
}
::v-deep .el-table__header {
  border-spacing: 0px;
}
::v-deep .el-table th.gutter{
  display: table-cell!important;
}
::v-deep.el-table–scrollable-y colgroup col[name=‘gutter’]{width:0px}
/* 去掉最下面的那一条线*/
::v-deep .el-table::before {
  height: 0px;
  background-color: transparent;
}
/* 设置表格行高度*/
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
  padding: 0;
  height: 0px;

}

/*表格内背景颜色*/
::v-deep.el-table th,
::v-deep.el-table tr,
::v-deep.el-table td {

  /*background-color: #052138;*/
  /*/ / 背景透明 */
  border: 0px;
  color: #93dcfe;
  /*/ / 修改字体颜色 */
  font-size: 14px;
  height: 28px;
  font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
  font-weight: Normal;
}
 /*修改表头样式-加边框*/
::v-deep .el-table__header-wrapper {
  border: solid 1px #052138;
}
 ::v-deep .el-table__body-wrapper {
   border: solid 1px #052138;
 }

html,body,#app,.el-container{
  padding: 0px;
  margin: 0px;
  height: 100%;
}
/*配置card 样式*/
.el-card{
  background-color:#052138 ;
  padding: 0;
  border: none;
  border-width: 0px;
  margin-bottom: 10px;

}

::v-deep .el-card__body{
  background-color:#052138 ;
  border: none;
  padding: 10px;
}
.el-card__header{
  text-decoration-color: #f0f0f0;
  border: none;
  border-width: 0;

}
.span{
  font-size: 14px;
  color:#06CBFF;
}
.text {
  font-size: 14px;
  color:rgb(123,149,174);
}

.item {
  margin-bottom: 0px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
 .mainClass {
   padding: 10px;
   background: RGB(5,33,56);
   border-radius: 2px;
   height: 100%;
   width: 100%;
   /*position: relative;*/
 }

 .grids {
   height: 20vh;
   position: relative;
   background: url( '../../assets/时间背景.png') no-repeat;
   background-size:100% 100%;
   overflow-x:auto;
 }
 /*滚动条高宽*/
 .grids::-webkit-scrollbar{
   width: 5px;
   height: 10px;
 }

 .grids2 {
   /*调整背景框高度*/
   height: 20vh;
   background: url( '../../assets/告警信息背景.png') no-repeat;
   background-size:100% 100%;
   overflow:auto;
 }

 /*滚动条高宽*/
 .grids2::-webkit-scrollbar{
   width: 5px;
   height: 10px;
 }

 .thclass{
   color: rgb(123,149,174);
   text-align: center;
   padding:5px 0;
   font-size: 14px;
 }

 .tdclass{
   color: rgb(123,149,174);
   text-align: center;
   font-size: 14px;
   /*此处控制智能告警表格间距*/
   padding-top:5px;
 }
 /*.status{*/
 /*  !* background-image:url("../../assets/02.png") center center; *!*/
 /*  background-repeat: no-repeat;*/
 /*  background-position: center center,top center;*/
 /*  ov*/
 /*  width: 260px;*/
 /*  height: 180px;*/
 /*  !* margin-left: 10%; *!*/
 /*}*/

</style>
